<!--
 * @描述：【每日持仓】
 * @作者：lichenguang
 * @时间: 2022/2/24 23:04
-->
<template>
  <div>
    <el-button type="primary" size="mini" style="float: right;" @click="innerVisible = true">新增</el-button>
    <el-table :data="escrowAccountTableData" style="width: 100%" :row-class-name="tableRowClassName" border>
      <el-table-column prop="platform" label="交易平台" width="180" align="center"/>
      <el-table-column prop="uKey" label="key" align="center"/>
      <el-table-column prop="uSecret" label="secret" align="center"/>
      <el-table-column prop="dispostState" label="是否成功" align="center" style="color: red">
        <template slot-scope="{row}">
          {{ row.dispostState == 0 ? '×': '√'}}
        </template>
      </el-table-column>
      <el-table-column prop="isUse" label="是否使用" align="center">
        <template slot-scope="{row}">
          <el-switch v-model="row.isUse" active-value="1" inactive-value="0"
                     active-color="#13ce66" inactive-color="#ff4949" @change="disabledBtn($event,row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="{row}">
          <el-button type="success" size="mini" @click="editBtn(row)">修改</el-button>
          <el-button type="danger" size="mini" @click="delBtn(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog width="30%" title="新增三方账号信息" :visible.sync="innerVisible" append-to-body>
      <el-form :model="escrowAccountForm" :rules="rules" ref="escrowAccountForm" label-width="100px">
        <el-form-item label="交易平台" prop="platform">
          <el-select v-model="escrowAccountForm.platform" placeholder="请选择">
            <el-option
              v-for="item in platform"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="key" prop="uKey">
          <el-input v-model="escrowAccountForm.uKey"></el-input>
        </el-form-item>
        <el-form-item label="secret" prop="uSecret">
          <el-input v-model="escrowAccountForm.uSecret"></el-input>
        </el-form-item>
        <el-form-item label="交易密码" prop="passphrase">
          <el-input type="password" v-model="escrowAccountForm.passphrase"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="bindingBtn">确定</el-button>
          <el-button @click="innerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {list, binding, disabled, remove} from '@/api/modules/account'

  export default {
    name: "PlatformAccount",
    props: ['userId'],
    data() {
      return {
        escrowAccountTableData: [],
        innerVisible: false,
        ip: "",
        platformId: "",
        platform: [
          {
            value: 'OKEX',
            label: '欧易'
          }
        ],
        escrowAccountForm: {
          userId: '',
          platform: '',
          uKey: '',
          uSecret: '',
          dispostState: '',
          isUse: '0',
          passphrase: ''
        },
        rules: {
          platform: [
            {required: true, message: '请输入交易平台', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          uKey: [
            {required: true, message: '请输入三方key', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          uSecret: [
            {required: true, message: '请输入三方secret', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          passphrase: [
            {required: true, message: '请输入三方secret', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          // isUse: [
          //   {required: true, message: '请选择是否使用', trigger: 'blur'},
          // ],
        }
      }
    },
    created() {
      this.list()
    },
    methods: {
      list() {
        list({'userId': this.userId}).then(res => {
          this.escrowAccountTableData = res.data
        })
      },
      editBtn(row) {
        this.innerVisible = true
        this.escrowAccountForm = row
      },
      delBtn(row) {
        console.log("删除按钮")
        console.log("删除ID", row.id)
        remove({'id': row.id}).then(res => {
          this.$notify({
            title: "Success",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.list()
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.isUse == 1) {
          return 'success-row';
        }
        return '';
      },
      disabledBtn(now, row) {
        disabled({id: row.id, isUse: now}).then(res => {
          this.$message.success("操作成功")
        })
      },
      bindingBtn() {
        this.$refs["escrowAccountForm"].validate(valid => {
          if (valid) {
            this.escrowAccountForm.userId = this.userId
            binding(this.escrowAccountForm).then(res => {
              this.ip = res.data.ip
              this.platformId = res.data.id
              this.$message.success("绑定成功")
              this.innerVisible = false
              this.list()
              this.escrowAccountForm = {
                userId: '',
                platform: '',
                uKey: '',
                uSecret: '',
                dispostState: '',
                isUse: '0',
                passphrase: ''
              }
            })
          }
        });
      },
      confirm() {
        console.log("确定按钮，开始测试请求是否")
        console.log("platformId", this.platformId)


      }
    }
  }
</script>

<style scoped>

</style>
